<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#top_content{
				width: 100%;
				height: 200px;
				background-color: aliceblue;
				line-height: 200px;
				text-align: center;
			}
			#sticky{
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: black;
				color: white;
			}
			#main_content{
				height: 2300px;
				background-color: #eee;
			}
			/*吸顶灯效果*/
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//JQ相关操作   思路：滚动下拉条，超过200px,吸顶灯定死页面上
				//超过200px 吸顶灯定死在页面上
				//固定值   获取到达吸顶灯位置的偏移量
				//offset() 获取或者设置元素相对于文档偏移量
				//.top获取body顶部
				var so=$("#sticky").offset().top;
				//$(Window)  来监听窗口事件：滚动，窗口视图大小
				//scroll()  监听页面的滚动事件
				$(Window).scroll(function(){
					//超过200px 
					//获取页面滚动值：动态值
					//scrollTop()获取滚动的位置 【动态值】
					var st=$(window).scrollTop();
					//超过200px: 动态值>固定值200  条件满足：页面吸顶灯样式定死
					if(st>so){
						$("#sticky").addClass("ac");
					}else{
						$("#sticky").removeClass("ac");
					}
				});
				
			});
		</script>
	</head>
	<body>
		<div id="top_content">顶部内容区域</div>
		<div id="sticky">我是吸顶灯元素</div>
		<div id="main_content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo nobis recusandae maxime dicta itaque, necessitatibus, eligendi architecto voluptatem vel a nulla nesciunt dolor perspiciatis ipsam, minima voluptatibus iusto. Dolores, quae?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae saepe, vitae porro tempora distinctio, dignissimos animi minima voluptatum voluptates unde debitis! Mollitia laborum pariatur voluptatum doloribus deleniti numquam fuga ab.</div>
	</body>
</html>